<template>
  <div id="myDetail" ref="container">
    <header>
      <div class="left" @click="$router.go(-1)">
        <div class="back-btn"></div>
      </div>
      <ul class="center">
        <li @click="tabIndex = 1; backToTop();" :class="{ active: this.tabIndex == 1 }">商品</li>
        <li @click="tabIndex = 2; backToTop();" :class="{ active: this.tabIndex == 2 }">详情</li>
        <li @click="tabIndex = 3; backToTop();" :class="{ active: this.tabIndex == 3 }">评价</li>
      </ul>
      <div class="right">
       <span class="dot"></span>
       <div class="right-menu">
          <ul class="right-menu-item">
            <li @click="$router.push('/')" :style="{ backgroundImage: `url(${t05})` }">首页</li>
            <li @click="$router.push('/category')" :style="{ backgroundImage: `url(${t06})` }">分类搜索</li>
            <li @click="$router.push('/buycart')" :style="{ backgroundImage: `url(${t07})` }">购物车</li>
            <li @click="$router.push('/mine')" :style="{ backgroundImage: `url(${t08})` }">我的</li>
          </ul>
        </div>
      </div>
    </header>
    <div class="container">
      <div v-if="this.tabIndex == 1" class="container-item1">
        <div class="swiper">
          <mt-swipe :auto="2000">
            <mt-swipe-item v-for="(imgUrl, i) in photos" :key="i">
              <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;">
                <!-- {{ imgUrl }} -->
								<img :src="'http://img0.wangjiu.com/' + imgUrl">
              </div>
            </mt-swipe-item>
          </mt-swipe>
        </div>
        <div class="good-info">
          <p class="title">{{ goodInfo['product_name'] }}</p>
          <p class="sub-title">{{ goodInfo['english_name'] }}</p>
          <p class="sell-title">{{ goodInfo['sell_point_title'] }}</p>
          <p class="price">
            <span>￥<em>{{ goodInfo['final_price'] }}</em></span>
          </p>
        </div>
        <!-- <router-link class="good-info-table form-item" to="/detail/property" tag="div">
          <span>商品信息</span>
          <span style="color: #999;">&gt;</span>
        </router-link> -->
        <div class="good-num form-item">
          <span>商品数量</span>
          <div class="count">
            <button @click="decCount" :class="{ 'is-dis': buyNum <= 1 }" :disabled="buyNum <= 1">-</button>
            <input type="text" v-model="buyNum">
            <button @click="incCount" :class="{ 'is-dis': buyNum >= 999999 }" :disabled="buyNum >= 999999">+</button>
          </div>
        </div>
        <div class="good-addr form-item" @click="handleAddrClick(0);masked = true">
          <div class="addr">
            <div>送货至&nbsp;&nbsp;
              <span>{{ address }}</span>
            </div><span style="color: #999;">&gt;</span>
          </div>
          <p><strong>{{ enough }}</strong> <strong>{{ shangjia }}</strong>发货，并提供售后服务</p>
        </div>
        <div class="good-comment form-item">
          <span>商品评论 ({{ comments.number }})</span>
          <span style="color: #999;" @click="tabIndex = 3; backToTop()">查看全部 &gt;</span>
        </div>
        <div class="good-detail" @click="tabIndex = 2">
          <p>——————点击查看商品详情——————</p>
        </div>
        <footer>
          <div :style="{ backgroundImage: `url(${d04})` }" class="collect">收藏</div>
          <div :style="{ backgroundImage: `url(${d10})` }" class="service">客服</div>
          <div @click="$router.push('/buycart')" :style="{ backgroundImage: `url(${d11})` }" class="shopcar">购物车</div>
          <div class="add-to-shopcar" @click="addToCart">加入购物车</div>
        </footer>
      </div>
      <div v-if="this.tabIndex == 2" class="container-item2">
        <div v-html="xiangqing"></div>
      </div>
      <div v-if="this.tabIndex == 3" class="container-item3">
        <div class="describe">
          <div
            v-for="i in 4" :key="i"
            :class="['describe-item', { 'describe-item-active': comments.activeIndex == i }]"
            @click="getComments(i, true); comments.activeIndex = i">
            <p>{{ comments[i].name }}</p>
            <p>({{ comments[i].num }})</p>
          </div>
        </div>
        <ul class="comments">
          <li
            v-for="(comment, i) in comments[comments.activeIndex].data"
            :key="i"
            class="comment-item"
          >
            <div class="user-info">
              <img :src="comment.img || comments.defaultAvatorImg">
              <span class="user-nickname">{{ comment.NICKNAME }}</span>
              <span class="user-create-time">{{ comment.create_at }}</span>
            </div>
            <div class="comment-info">
              <p>
                <img
                  v-for="(v, i) in comment.score"
                  :key="i"
                  :src="comments.loveImg"
                >
              </p>
              <p>{{ comment.content }}</p>
            </div>
          </li>
          <li class="load-more"
            @click="getComments(comments.activeIndex)"
          >{{ comments[comments.activeIndex].loadMoreTip }}</li>
        </ul>
      </div>
    </div>
    <transition name="mask">
      <div v-if="masked">
        <div class="mask" @click="masked = false"></div>
        <div class="select-addr">
          <div class="top-nav">
            <div class="back-btn" @click="masked = false">
            </div>
            <h2>配送至</h2>
          </div>
          <div class="addr-info">
            <div v-if="addr.isOk">
              <ul class="addr-list">
                <li class="addr-list-item" v-for="addr in addr.temp" :key="addr.area_id" @click="handleAddrClick(addr.area_id, addr.area_name)">{{ addr.area_name }}</li>
              </ul>
            </div>
            <div v-else class="loading"><h2>加载中...</h2></div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import Vue from 'vue'

import http from 'vue-resource'
Vue.use(http)

import avatorImg from '../assets/60-60.jpg'
import loveImg from '../assets/d05.png'
import t05 from '../assets/t05.png'
import t06 from '../assets/t06.png'
import t07 from '../assets/t07.png'
import t08 from '../assets/t08.png'
import d04 from '../assets/d04.png'
import d10 from '../assets/d10.png'
import d11 from '../assets/d11.png'
import { MessageBox } from 'mint-ui'


export default {
  data: () => ({
    d04, d10, d11,
		t05, t06, t07, t08,
		photos: [],
    tabIndex: 1,
    buyNum: 1,
    addr: {
      trueAddr: {
        sheng: '',
        shi: '',
        xian: '',
      },
      temp: [],
      isOK: false,
      currentStep: 0,
      tempAddr: {
        sheng: '',
        shi: '',
        xian: ''
      }
    },
    haveGood: true,
    shangjia: '网酒网',
    masked: false,
    comments: {
      defaultAvatorImg: avatorImg,
      loveImg: loveImg,
      number: 0,
      '1': {
        name: '全部',
        num: 0,
        pageNum: 1,
        data: [],
        loadMoreTip: '加载更多',
        hasMore: true
      },
      '2': {
        name: '好评',
        num: 0,
        pageNum: 1,
        data: [],
        loadMoreTip: '加载更多',
        hasMore: true
      },
      '3': {
        name: '中评',
        num: 0,
        pageNum: 1,
        data: [],
        loadMoreTip: '加载更多',
        hasMore: true
      },
      '4': {
        name: '差评',
        num: 0,
        pageNum: 1,
        data: [],
        loadMoreTip: '加载更多',
        hasMore: true
      },
      activeIndex: 1,
    },
    goodInfo: {
      pid: '393563904',
      'product_name': '',
      'english_name': '',
      'sell_point_title': '',
      'final_price': 0,
      'product_main_image': ''
    },
    xiangqing: ''
  }),
  computed: {
    address() {
      let { sheng, shi, xian } = this.addr.trueAddr
      return sheng && shi && xian ? `${sheng} ${shi} ${xian}` : '请点击选择'
    },
    enough() {
      return this.haveGood ? '有货' : '无货'
    },
  },
  methods: {
  	addToCart(){
  		let p = {
        ...this.goodInfo,
        count: this.buyNum,
        isSelected: true,
      }
  		console.log(p)
      this.$store.commit('addToShopcar', p)
      MessageBox('提示','添加成功')
      // alert('增加成功！')
  	},
  	
    handleAddrClick(id, name) {
      this.$set(this.addr, 'isOk', false)
      this.$http
      .get('/apj/api/simple/areaService/childArea?&parent_id=' + id + '&COOKIE_USER_ID=&port=AndroidPhone&COOKIE_USER_TYPE=&COOKIE_USER_PROVINCE=%E5%8C%97%E4%BA%AC%E5%B8%82&COOKIE_TOKEN_DATE=1508764617526&version_code=521&COOKIE_USER_DISTRICT=%E4%B8%9C%E5%9F%8E%E5%8C%BA&client_sig=andriodphone&COOKIE_USER_CITY=%E5%8C%97%E4%BA%AC%E5%B8%82&COOKIE_USER_LEVEL_ID=1&COOKIE_TOKEN_ID=23fbb58ac9d3278b07884cc608928dc7&COOKIE_USER_NAME=&os=Android+4.4.2&COOKIE_SESSION_ID=AB0512250C7158E75C3FA493B72CD094&COOKIE_NICKNAME=&COOKIE_CPS_ID=C_Android_Xiaomi_5.2.1_46007_4.4.2_null')
      .then(res => res.body.result)
      .then(data => {
        this.$set(this.addr, 'temp', data)
        this.$set(this.addr, 'isOk', true)
        switch (this.addr.currentStep++) {
          case 0: {
            break
          }
          case 1: {
            this.addr.tempAddr.sheng = name
            break
          }
          case 2: {
            this.addr.tempAddr.shi = name
            break
          }
          case 3: {
            this.addr.tempAddr.xian = name
            this.addr.currentStep = 0
            this.masked = false
            this.$set(this.addr, 'trueAddr', this.addr.tempAddr)
            break
          }
        }
      })
    },
    decCount() {
      this.buyNum--
    },
    incCount() {
      this.buyNum++
    },
    getComments(type, refresh = false) {
      if (refresh) {
        this.comments[type].data = []
        this.comments[type].hasMore = true
        this.comments[type].pageNum = 1
      }
      if (!this.comments[type].hasMore) {
        return
      }
      this.comments[type].loadMoreTip = '加载中'
      this.$http
        .get(
          `apj/api/simple/srsService/getGoodsComment?page_num=${this.comments[type].pageNum}&show_num=5&pid=${this.goodInfo.pid}&comment_level=${type - 2}`
        )
        .then(res => res.body.result)
        .then(data => {
          this.comments[type].loadMoreTip = '加载更多'

          this.comments.number = data.count
          this.comments[1].num = data.comment_static.total_comment
          this.comments[2].num = data.comment_static.good_comment
          this.comments[3].num = data.comment_static.medium_comment
          this.comments[4].num = data.comment_static.bad_comment

          if (data.comments) {
            if (refresh) {
              this.comments[type].data = data.comments
            } else {
              data.comments.forEach(x => this.comments[type].data.push(x))
            }
          }
          let { data: d, num } = this.comments[type]
          if (d.length < num) {
            this.comments[type].pageNum++
          } else {
            this.comments[type].hasMore = false
            this.comments[type].loadMoreTip = '没有内容啦'
          }
          // this.$set(this.comments, 'show', data.comments)
        })
        .catch(err => console.log(err));
    },
    backToTop() {
			let el = this.$refs.container
			el.scrollTop = 0
		},
		init() {
			this.tabIndex = 1
			this.photos = []
			this.goodInfo.pid = this.$route.params.id
			this.$http
				.get(
					`/prod/api/query/get_product_detail.json?pid=${this.goodInfo.pid}&seller_id=0&format=json&select_info=mainInfo,photos,gift,together,order_reduce,order_discount,order_gift,order_add`
				)
				.then(res => res.body.result)
				.then(data => {
					if (!data) {
						return
          }
          // console.log(data)
					data.photos.forEach(x => this.photos.push(x.source))
					this.xiangqing = data.detail
					this.$set(this.goodInfo, 'product_name', data.product_name)
					this.$set(this.goodInfo, 'english_name', data.english_name)
          this.$set(this.goodInfo, 'sell_point_title', data.sell_point_title)
          this.goodInfo.product_main_image = data.product_main_image
				})
				.catch(err => console.log(err));

			this.$http
				.get(
					`apj/api/simple/promotionService/getProductPromotions?pid=${this.goodInfo.pid}&seller_id=0&select_info=gift,together,order_reduce,order_discount,order_gift,order_add`
				)
				.then(res => res.body.result)
				.then(data => {
					this.$set(this.goodInfo, 'final_price', data.final_price)
				})
				.catch(err => console.log(err));
		}
  },
  mounted() {
		this.init()
    // 请求评论
    this.getComments(1, true)
    
    this.$store.dispatch('getAllProducts')
	},
	watch: {
		$route() {
			this.init()
	    this.getComments(1, true)
		}
	}
};
</script>

<style lang="scss" scoped>
	#myDetail {
		height: 100%;
		overflow: scroll;
	}
  header {
    position: fixed;
    top: 0;
    z-index: 1;
    font-size: 14px;
    height: 0.48rem;
    display: flex;
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    .left, .right {
      flex-basis: 0.6rem;
    }
    .center {
      flex: 1;
      display: flex;
      li {
        line-height: 0.48rem;
        flex: 1;
        text-align: center;
        &.active {
          color: #ca0915;
        }
      }
    }
    .right {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      .dot {
        display: block;
        width: 0.05rem;
        height: 0.05rem;
        background: #999;
        border-radius: 50%;
        &:before, &:after {
          position: absolute;
          display: block;
          content: '';
          width: 0.05rem;
          height: 0.05rem;
          background: #999;
          border-radius: 50%;
        }
        &:before {
          left: 0.15rem;
        }
        &:after {
          left: 0.4rem;
        }
      }
      .right-menu {
        display: none;
        position: absolute;
        top: 100%;
        right: 0.1rem;
        width: 1.2rem;
        background: #000;
        border-radius: 0.05rem;
        padding: 0 0.1rem;
        &:after {
          position: absolute;
          top: -0.05rem;
          right: 0.08rem;
          content: '';
          width: 0.1rem;
          height: 0.1rem;
          background: #000;
          transform: rotate(45deg);
        }
        li {
          color: #fff;
          background-size: 0.24rem;
          background-repeat: no-repeat;
          background-position: 0 50%;
          padding: 0.05rem 0 0.05rem 0.3rem;
          line-height: 0.25rem;
        }
      }
      &:hover .right-menu {
        display: block;
      }
    }
  }
  footer {
    position: fixed;
    bottom: 0;
    display: flex;
    width: 100%;
    box-shadow: 0 0 10px rgba(0,0,0,.3);
    height: 0.48rem;
    line-height: 0.48rem;
    text-align: center;
    background: #fff;
    .add-to-shopcar {
      flex-basis: 1.2rem;
      background: #ca0915;
      color: #fff;
    }
    .collect, .service, .shopcar {
      background-position: center 0.08rem;
      background-size: 0.2rem;
      background-repeat: no-repeat;
      padding-top: 0.12rem;
      flex: 1;
      border-right: 1px solid #eee;
    }
  }
  .container {
    margin-top: 0.48rem;
    margin-bottom: 0.48rem;
    font-size: 14px;
    .container-item1 {
      .swiper {
        // background-color: yellow;
        width: 100%;
				height: 3.2rem;
        // height: 100%;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .good-info {
        padding: 0.06rem 0.15rem;
        $b: 1px solid #eee;
        border-top: $b;
        border-bottom: $b;
        background: #fff;
        line-height: 20px;
        .sub-title {
          margin-top: 0.05rem;
          color: #999;
        }
        .sell-title {
          margin-top: 0.05rem;
          color: #ca0915;
        }
        .price {
          margin-top: 0.05rem;
          line-height: 0.26rem;
          color: #ca0915;
          font-weight: bold;
          em {
            font-size: 20px;
          }
        }
      }
      .form-item {
        display: flex;
        line-height: 0.44rem;
        background: #fff;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        padding: 0 0.1rem;
      }
      .good-info-table {
        margin-top: 0.1rem;
        border-top: 1px solid #eee;
      }
      .good-num {
        margin: 0;
        .count {
          display: flex;
          justify-content: center;
          align-items: center;
          button {
            display: block;
            border: none;
            background: #eee;
            width: 0.3rem;
            height: 0.3rem;
            line-height: 0.3rem;
            border-radius: 0.05rem;
          }
          .is-dis {
            color: #aaa;
          }
          input {
            margin: 0;
            display: block;
            width: 0.5rem;
            height: 0.3rem;
            background: #eee;
            text-align: center;
            border: none;
            border-left: 1px solid #fff;
            border-radius: 0.05rem;
            border-right: 1px solid #fff;
          }
        }
      }
      .good-addr {
        padding: 0.1rem;
        margin-top: 0.1rem;
        line-height: 0.24rem;
        display: block;
        .addr {
          display: flex;
          justify-content: space-between;
        }
        p {
          text-align: center;
        }
      }
      .good-comment {
        margin-top: 0.1rem;
      }
      .good-detail {
        margin-top: 0.1rem;
        padding-bottom: 0.1rem;
        p {
          text-align: center;
          color: #999;
          line-height: 0.2rem;
        }
      }
    }
    .container-item3 {
      .describe {
        height: 0.58rem;
        background: #fff;
        border-bottom: 1px solid #eee;
        display: flex;
        .describe-item {
          flex: 1;
          text-align: center;
          display: flex;
          flex-flow: column;
          justify-content: center;
        }
        .describe-item-active {
          color: #ca0915;
        }
      }
      .comments {
        position: relative;
        .comment-item {
          background: #fff;
          margin-top: 0.1rem;
          .user-info {
            padding: 0.1rem;
            display: flex;
            img {
              flex-basis: 0.4rem;
              width: 0.4rem;
              height: 0.4rem;
            }
            span {
              line-height: 0.4rem;
            }
            .user-nickname {
              margin-left: 0.1rem;
              flex: 1;
            }
            .user-create-time {
              text-align: right;
              flex: 2;
            }
          }
          .comment-info {
            padding: 0.1rem;
            border-top: 1px solid #eee;
            img {
              width: 0.2rem;
              height: 0.2rem;
            }
          }
        }
        .load-more {
          position: absolute;
          line-height: 0.48rem;
          text-align: center;
          width: 100%;
          // margin-bottom: -0.48rem;
        }
      }
    }
  }
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
  }
  .select-addr {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1;
    width: 2.7rem;
    height: 100%;
    background: #fff;
    .top-nav {
      display: flex;
      line-height: 0.48rem;
      font-size: 12px;
      border-bottom: 1px solid #eee;
      h2 {
        flex: 1;
        text-align: center;
        font-weight: normal;
      }
    }
    .addr-info {
      font-size: 12px;
      .loading {
        text-align: center;
        line-height: 0.5rem;
      }
      .addr-list {
        height: 5.2rem;
        overflow: scroll;
      }
      .addr-list-item {
        line-height: 0.5rem;
        padding: 0 0.1rem;
        &:hover {
          background: #eee;
        }
      }
    }
  }
  .back-btn {
    flex-basis: 0.48rem;
    &:after {
      content: "";
      width: 0.1rem;
      height: 0.1rem;
      position: absolute;
      top: 0.18rem;
      left: 0.21rem;
      border-bottom: 1px solid #5d5d5d;
      border-right: 1px solid #5d5d5d;
      transform: rotate(135deg);
    }
  }
  .mask-enter-active, .mask-leave-active {
    transition: opacity .5s;
  }
  .mask-enter, .mask-leave-to {
    opacity: 0;
  }
</style>
